<template>
	<view>
		<view class="searchBox box flex_r_between">
			<view class="search_bgc flex_r_start">
				<image style="width: 24rpx; height: 24.4rpx;margin-right: 8rpx;" src="/pagesA/static/homeImg/icon/search@2x.png" mode=""></image>
				<input type="text" v-model="searchValue" @confirm="confirm" placeholder="请输入您要搜索的商品名称" placeholder-class="pl"
				 confirm-type="搜索" />
			</view>
			<view class="close">
				取消
			</view>
		</view>
		<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
		 :refresher-threshold="100" refresher-background="#F3F4F5" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		 @refresherrestore="onRestore" @refresherabort="onAbort">
			<uni-list>
				<uni-list-item @click="$redirectTo('./Post')" v-for="(item,index) in 10" :key="index" title="Type something 圣弗朗西斯科进口香木瓜" thumb="/pagesA/static/homeImg/arwthrshts.png" thumb-size="lg" :show-arrow="false"></uni-list-item>
			</uni-list>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				triggered: false
			};
		},
		onLoad() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},
		methods: {
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/static/css/flex.css");

	.box {
		box-sizing: border-box;
	}

	.searchBox {
		width: 100%;
		padding: 16rpx 24rpx 16rpx 20rpx;

		.search_bgc {
			width: 630rpx;
			height: 60rpx;
			background: #EDEEEF;
			border-radius: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			input {
				height: 100%;
				width: 80%;
				font-size: 24rpx;
			}

			.pl {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
			}
		}

		.close {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

		}
	}
</style>
